<template>
  <div style="margin-top:30px">
    <el-form ref="form" :rules="rules" :model="form" label-width="100px">
      <el-row>
        <el-col :span="22">
          <el-form-item label="登录账号" prop="phone" v-if="isAdd">
            <el-input v-model="form.phone" />
          </el-form-item>
          <el-form-item label="登录账号" v-else>
            <el-input v-model="form.phone" disabled />
          </el-form-item>
        </el-col>
      </el-row>
       <el-row>
        <el-col :span="22">
          <el-form-item label="员工姓名" prop="name">
            <el-input v-model="form.name" minlength="2" maxlength="20" show-word-limit />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="22">
          <el-form-item label="登录密码" prop="upass">
            <el-input v-model="form.upass"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="22">
            <el-form-item label="入驻商授权" prop="authorizationShipmentCode">
              <el-select class="w100" v-model="form.authorizationShipmentCode" multiple filterable  placeholder="请选择">
                <el-option
                  v-for="item in shipment"
                  :key="item.partyCode"
                  :label="item.userName"
                  :value="item.partyCode">
                </el-option>
              </el-select>
            </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="22">
            <el-form-item label="仓库授权" prop="authorizationWarehouseCode">
              <el-select class="w100" v-model="form.authorizationWarehouseCode" multiple filterable  placeholder="请选择">
                <el-option
                  v-for="item in warehouse"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code">
                </el-option>
              </el-select>
            </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="funcCancel">取 消</el-button>
      <el-button type="primary" @click="funcSubmit" :disabled="isDisable">确 定</el-button>
    </div>
  </div>
</template>
<script>
import Vue from 'vue'
import 'xe-utils'
import VXETable from 'vxe-table'
import 'vxe-table/lib/index.css'
import { isDefine, validatePhone } from '@/utils/validate'
import { userLoginDetail, getUserShipments, getUserWarehouses, userAdd, userEdit } from '@/api/basicInfo'
Vue.use(VXETable)
export default {
  name: 'PartyAdd',
   props: {
    operationType: {
      type: String,
      required: true
    },
    operationCode: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      isAdd: this.operationType === 'add',
      isDisable:false,
      props: { multiple: true },
      warehouse:[],
      shipment:[],
      form: {
          name: '',
          phone: '',
          groupCode: '',
          authorizationShipmentCode:[],
          authorizationWarehouseCode:[]
      },
      rules: {
        phone: [
          {
            required: true,
            validator(rule, value, callback) {
              if (!isDefine(value)) {
                callback(new Error('请输入账号！'))
              } else if (!validatePhone(value)) {
                callback(new Error('手机号格式有误！'))
              } else {
                callback()
              }
            }
          }
        ],
        name: [
          { required: true, message:'请输入员工姓名' }
        ],
        upass: [
          { required: true, message:'请输入密码' }
        ],
        authorizationShipmentCode: [{ required: true, message:'请选择入驻商' }],
        authorizationWarehouseCode:[{ required: true, message:'请选择仓库' }]
      }
    }
  },
  created() {
    // 编辑时 获取页面信息
    if(!this.isAdd) {
      this.rules.upass[0].required = false
      this.getInfo(this.operationCode)
    }
    // 获取下拉数据
    this.selectData()
  },
  methods: {
    // 获取页面信息
    getInfo(code) {
      userLoginDetail(code).then((res) => this.form = JSON.parse(JSON.stringify(res.data)))
    },
    // 获取下拉数据(入驻商授权,仓库授权)
    selectData() {
      getUserShipments().then((res) => this.shipment = res.data)
      getUserWarehouses().then((res) => this.warehouse = res.data)
    },
    // 提交
    funcSubmit() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.isDisable = true
          const requestOperation = this.isAdd ? userAdd : userEdit
          requestOperation(this.form)
          .then((res) => {
            this.$message.success(res.msg)
            this.$emit('fatherAddMethod')
            this.isDisable = false
          })
          .catch(() => (this.isDisable = false))
        } else {
          return false
        }
      })
    },
    // 取消
    funcCancel() {
      this.$emit('fatherAddMethod')
    },
  }
}
</script>
<style lang="scss" scoped>
.dialog-footer {
  margin:15px 0 15px 0;
  width: 175px;
  float: right;
}
</style>
